<template>
  <div class="wrap" ref="wrap-container">
    <!-- 标题 -->
    <h1 class="head">博享家</h1>
    <div class="title"></div>
    <!-- 展示效果 -->
    <div class="effect">
      <div class="panda">
        <div class="ear"></div>
        <div class="face">
          <div class="eye-shade"></div>
          <div class="eye-white">
            <div class="eye-ball"></div>
          </div>
          <div class="eye-shade rgt"></div>
          <div class="eye-white rgt">
            <div class="eye-ball"></div>
          </div>
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
        <div class="body"></div>
        <div class="foot">
          <div class="finger"></div>
        </div>
        <div class="foot rgt">
          <div class="finger"></div>
        </div>
      </div>
      <form autocomplete="off">
        <div class="hand"></div>
        <div class="hand rgt"></div>
        <div class="form-group">
          <input
            required="required"
            class="form-control"
            v-model="loginForm.loginId"
          />
          <label class="form-label">用户名</label>
        </div>
        <div class="form-group">
          <input
            id="password"
            type="password"
            required="required"
            class="form-control"
            v-model="loginForm.loginPwd"
            @focusin="focusin"
            @focusout="focusout"
            @keyup.enter="fetchData"
          />
          <label class="form-label">密码</label>
          <p class="alert">请输入账号密码</p>
          <button class="btn" @click="fetchData">登录</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
// import { validUsername } from "@/utils/validate";
// import { getCaptcha } from "@/api/captcha.js";
import { login } from "@/api/user";
import $ from "jquery";
export default {
  name: "Login",
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!validUsername(value)) {
    //     callback(new Error("Please enter the correct user name"));
    //   } else {
    //     callback();
    //   }
    // };
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error("The password can not be less than 6 digits"));
    //   } else {
    //     callback();
    //   }
    // };

    // 密码的验证
    // const checkPassword = (rule, value, callback) => {
    //   const reg = /abcd/;
    //   if (reg.test(value)) {
    //     callback(); // 验证通过
    //   } else {
    //     callback(new Error("密码不符合XXX要求"));
    //   }
    // };

    return {
      svg: "",
      loginForm: {
        loginId: "",
        loginPwd: "",
        // captcha: "",
        checked: true,
      },
      // loginRules: {
      //   // 在这里书写各个字段的验证规则
      //   loginId: [
      //     {
      //       required: true,
      //       trigger: "blur",
      //       message: "请输入管理员账号",
      //     },
      //   ],
      //   loginPwd: [
      //     {
      //       required: true,
      //       trigger: "blur",
      //       message: "请输入管理员密码",
      //     },
      //   ],
      //   captcha: [
      //     {
      //       required: true,
      //       trigger: "blur",
      //       message: "请输入验证码",
      //     },
      //   ],
      // },
      passwordType: "password",
      loading: false,
    };
  },
  watch: {
    // $route: {
    //   handler: function (route) {
    //     this.redirect = route.query && route.query.redirect;
    //   },
    //   immediate: true,
    // },
  },
  created() {
    window.addEventListener("mouseover", this.mouseMove, true);
  },
  methods: {
    fetchData() {
      login({
        loginId: this.loginForm.loginId,
        loginPassword: this.loginForm.loginPwd,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.message,
            });
            localStorage.setItem("users", JSON.stringify(res.data));
            this.$router.push("/");
          } else {
            this.$message({
              type: "error",
              message: res.message,
              duration: "3000",
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: res,
          });
        });
      // .finally((res) => {
      //   this.$message({
      //     type: "info",
      //     message: res.message,
      //   });
      //   // this.$router.push("/");
      // });
    },
    focusin() {
      $("form").addClass("up");
    },
    focusout() {
      $("form").removeClass("up");
    },

    mouseMove(event) {
      var dw = $(document).width() / 15;
      var dh = $(document).height() / 15;
      var x = event.pageX / dw;
      var y = event.pageY / dh;
      $(".eye-ball").css({
        width: x,
        height: y,
      });
    },

    click() {
      $("form").addClass("wrong-entry");
      setTimeout(function () {
        $("form").removeClass("wrong-entry");
      }, 3000);
    },
    getCaptchaFunc() {
      getCaptcha().then((res) => {
        this.svg = res;
      });
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 登录相关的方法
    handleLogin() {
      // this.$router.push({ path: "/" });
      // this.$refs.loginForm.validate((valid) => {
      //   console.log(valid);
      //   // if (valid) {
      //   //   this.loading = true;
      //   //   this.$store
      //   //     .dispatch("user/login", this.loginForm)
      //   //     .then(() => {
      //   //       this.$router.push({ path: this.redirect || "/" });
      //   //       this.loading = false;
      //   //     })
      //   //     .catch(() => {
      //   //       this.loading = false;
      //   //     });
      //   // } else {
      //   //   console.log("error submit!!");
      //   //   return false;
      //   // }
      // });
    },
  },
};
</script>

<style lang="css" scoped >
@font-face {
  font-family: AlimamaShuHeiTi-Bold;
  src: url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold/AlimamaShuHeiTi-Bold.eot)
      format("embedded-opentype"),
    url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold/AlimamaShuHeiTi-Bold.otf)
      format("opentype"),
    url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold/AlimamaShuHeiTi-Bold.ttf)
      format("TrueType"),
    url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold/AlimamaShuHeiTi-Bold.woff)
      format("woff"),
    url(https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold/AlimamaShuHeiTi-Bold.woff2)
      format("woff2");
}

*::-moz-selection {
  background: rgba(255, 255, 255, 0.99);
  color: #121212;
}

*::selection {
  background: rgba(255, 255, 255, 0.99);
  color: #121212;
}
.head {
  text-align: center;
  font-size: 40px;
  margin-bottom: -10px;
  margin-top: 50px;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.wrap {
  align-content: flex-start;
}

img {
  width: 100%;
}

.title {
  width: 100%;
  display: flex;
}

.title span {
  font-size: 40px;
  font-family: AlimamaShuHeiTi-Bold;
  padding: 20px;
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.effect {
  width: 100%;
  height: 510px;
}

.panda {
  position: relative;
  width: 200px;
  margin: 50px auto;
}

.face {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 100%;
  margin: 50px auto;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  z-index: 50;
  position: relative;
}

.ear,
.ear:after {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #000;
  z-index: 5;
  border: 10px solid #fff;
  left: -15px;
  top: -15px;
  border-radius: 100%;
}

.ear:after {
  content: "";
  left: 125px;
}

.eye-shade {
  background: #000;
  width: 50px;
  height: 80px;
  margin: 10px;
  position: absolute;
  top: 35px;
  left: 25px;
  transform: rotate(220deg);
  border-radius: 25px/20px 30px 35px 40px;
}

.eye-shade.rgt {
  transform: rotate(140deg);
  left: 105px;
}

.eye-white {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #fff;
  z-index: 500;
  left: 40px;
  top: 80px;
  overflow: hidden;
}

.eye-white.rgt {
  right: 40px;
  left: auto;
}

.eye-ball {
  position: absolute;
  width: 0px;
  height: 0px;
  left: 20px;
  top: 20px;
  max-width: 10px;
  max-height: 10px;
  transition: 0.1s;
}

.eye-ball:after {
  content: "";
  background: #000;
  position: absolute;
  border-radius: 100%;
  right: 0;
  bottom: 0px;
  width: 20px;
  height: 20px;
}

.nose {
  position: absolute;
  height: 20px;
  width: 35px;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50px 20px/30px 15px;
  transform: rotate(15deg);
  background: #000;
}

.body {
  background: #fff;
  position: absolute;
  top: 190px;
  left: -10px;
  border-radius: 100px 100px 100px 100px/126px 126px 96px 96px;
  width: 220px;
  height: 280px;
  box-shadow: 0 5px 10px rgb(0 0 0 / 30%);
}

.hand,
.hand:after,
.hand:before {
  width: 40px;
  height: 30px;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  background: #000;
  margin: 5px;
  position: absolute;
  top: 70px;
  left: -25px;
}

.hand:after,
.hand:before {
  content: "";
  left: -5px;
  top: 11px;
}

.hand:before {
  top: 26px;
}

.hand.rgt,
.rgt.hand:after,
.rgt.hand:before {
  left: auto;
  right: -25px;
}

.hand.rgt:after,
.hand.rgt:before {
  left: auto;
  right: -5px;
}

.foot {
  top: 360px;
  left: -65px;
  position: absolute;
  background: #000;
  z-index: 1400;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  border-radius: 40px 40px 39px 40px/26px 26px 63px 63px;
  width: 70px;
  height: 100px;
}

.foot:after {
  content: "";
  width: 45px;
  height: 55px;
  background: #222;
  border-radius: 100%;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
}

.foot .finger,
.foot .finger:after,
.foot .finger:before {
  position: absolute;
  width: 20px;
  height: 21px;
  background: #222;
  border-radius: 100%;
  top: 10px;
  right: 5px;
}

.foot .finger:after,
.foot .finger:before {
  content: "";
  right: 25px;
  width: 15px;
  top: -3px;
}

.foot .finger:before {
  right: 45px;
  top: 5px;
}

.foot.rgt {
  left: auto;
  right: -65px;
}

.foot.rgt .finger,
.foot.rgt .finger:after,
.foot.rgt .finger:before {
  left: 5px;
  right: auto;
}

.foot.rgt .finger:after {
  left: 25px;
  right: auto;
}

.foot.rgt .finger:before {
  left: 45px;
  right: auto;
}

form {
  max-width: 350px;
  padding: 20px 40px;
  background: #fff;
  height: 260px;
  margin: auto;
  display: block;
  box-shadow: 0 10px 15px rgb(0 0 0 / 15%);
  transition: 0.3s;
  position: relative;
  transform: translateY(-90px);
  z-index: 500;
  border-radius: 10px;
  padding-top: 36px;
}

form.up {
  transform: translateY(-180px);
}

h1 {
  color: #ff4081;
  font-family: "Dancing Script", cursive;
}

.btn {
  background: #fff;
  padding: 5px;
  width: 150px;
  height: 40px;
  border: 1px solid #ff4081;
  margin-top: 25px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 50px #ff4081 inset;
  color: #fff;
  border-radius: 40px;
}

.btn:hover {
  box-shadow: 0 0 #ff4081 inset;
  color: #ff4081;
}

.btn:focus {
  outline: none;
}

.form-group {
  position: relative;
  font-size: 15px;
  color: #666;
}

.form-group + .form-group {
  margin-top: 30px;
}

.form-group .form-label {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 5px;
  transition: 0.3s;
}

.form-group .form-control {
  width: 100%;
  position: relative;
  z-index: 3;
  height: 35px;
  background: none;
  border: none;
  padding: 5px 0;
  padding-bottom: 0px;
  transition: 0.3s;
  border-bottom: 1px solid #777;
  color: #555;
}

.form-group .form-control:invalid {
  outline: none;
}

.form-group .form-control:focus,
.form-group .form-control:valid {
  outline: none;
  box-shadow: 0 1px #ff4081;
  border-color: #ff4081;
}

.form-group .form-control:focus + .form-label,
.form-group .form-control:valid + .form-label {
  font-size: 12px;
  color: #ff4081;
  transform: translateY(-15px);
}

.alert {
  position: absolute;
  color: #ff4081;
  font-size: 16px;
  right: -100px;
  top: -300px;
  z-index: 200;
  padding: 30px 25px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0, 0);
  -moz-transition: linear 0.4s 0.6s;
  -o-transition: linear 0.4s 0.6s;
  -webkit-transition: linear 0.4s;
  -webkit-transition-delay: 0.6s;
  transition: linear 0.4s 0.6s;
}

.alert:after,
.alert:before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  left: -19px;
  bottom: -8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}

.alert:before {
  width: 15px;
  height: 15px;
  left: -35px;
  bottom: -25px;
}

.wrong-entry {
  -webkit-animation: wrong-log 0.3s;
  animation: wrong-log 0.3s;
}

.wrong-entry .alert {
  opacity: 1;
  transform: scale(1, 1);
}

@-webkit-keyframes eye-blink {
  to {
    height: 30px;
  }
}

@keyframes eye-blink {
  to {
    height: 30px;
  }
}

@-webkit-keyframes wrong-log {
  0%,
  100% {
    left: 0px;
  }

  20%,
  60% {
    left: 20px;
  }

  40%,
  80% {
    left: -20px;
  }
}

@keyframes wrong-log {
  0%,
  100% {
    left: 0px;
  }

  20%,
  60% {
    left: 20px;
  }

  40%,
  80% {
    left: -20px;
  }
}

.code {
  padding: 25px 15px;
  border-radius: 5px;
  overflow: hidden;
}

.code img {
  border-radius: 5px;
}
.swiper-slide {
  display: flex;
}
.swiper-slide img {
  width: 70%;
  margin: auto;
}
</style>
